<template>
  <!-- 图片列表 -->
  <div class="fileList">
    <p class="tips">Tips: 大小不超过100M，格式为doc、docx、xls、xlsx、ppt、pptx、pdf、rar、zip的素材</p>
    <el-table :data="list" style="width: 100%;min-height: calc(100vh - 4.2rem);">
      <el-table-column type="index" width="70" label="序号" align="center" />
      <el-table-column label="内容" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-button type="text" style="color: #606266;" @click="yuLanClick(scope.row)">{{ scope.row.name }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="大小" width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.size | fileFormate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="150" align="center">
        <template slot-scope="scope">
          <span :style="{color: colorFormate(scope.row.status).color}">{{ colorFormate(scope.row.status).name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.updateTime | timeFormate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" header-align="center">
        <template slot-scope="scope">
          <el-tooltip v-for="(item, index) in colorFormate(scope.row.status).svgList" :key="index" effect="dark" :content="item.label" placement="top">
            <svg-icon class="svgIcon" :icon-class="item.value" @click.stop="buttonClick(scope.$index, scope.row, item.key)" />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 流程详情 -->
    <process-dialog ref="ProcessDialog" />
  </div>
</template>

<script>
import { bus } from '@/main'
import ProcessDialog from '../components/ProcessDesc-dialog'

export default {
  name: 'FileList',
  components: { ProcessDialog },
  data() {
    return {
      list: [],
      ProcessList: [],     // 流程
      ProcessDesc: false,  // 流程详情弹窗开关
    }
  },
  methods: {
    // 获取父级传递的数据
    getData(data, name) {
      this.list = data
    },
    // 表格 ‘状态’ 栏，不同状态，设置不同颜色
    colorFormate(key) {
      // 只有待提交和已退回的素材才可以删除和备注，其余状态的素材不可备注和删除
      // 备注则随时可以修改；
      // 只有审核中可以撤回；
      // 只有待提交和已退回的才可以提交
      switch (key) {
        case '1':
          const obj1 = {
            color: '#FF9824',
            name: '待提交',
            svgList: [
              // {label: '预览', value: 'see', key: 'seeClick'},
              { label: '提交', value: 'upload', key: 'uploadClick' },
              { label: '下载', value: 'download', key: 'downloadClick' },
              // {label: '备注', value: 'edit'},
              { label: '删除', value: 'delete', key: 'deleteClick' },
              { label: '查看流程', value: 'see', key: 'processClick' }
            ]
          }
          return obj1
          break
        case '2':
          const obj2 = {
            color: '#5B10B5',
            name: '审核中',
            svgList: [
              // {label: '预览', value: 'see', key: 'seeClick'},
              { label: '撤回', value: 'revoke', key: 'revokeClick' },
              { label: '下载', value: 'download', key: 'downloadClick' },
              { label: '查看流程', value: 'see', key: 'processClick' }
              // {label: '备注', value: 'edit'}
            ]
          }
          return obj2
          break
        case '3':
          const obj3 = {
            color: '#0698FD',
            name: '已审核',
            svgList: [
              // {label: '预览', value: 'see', key: 'seeClick'},
              { label: '下载', value: 'download', key: 'downloadClick' },
              { label: '查看流程', value: 'see', key: 'processClick' }
              // {label: '备注', value: 'edit'}
            ]
          }
          return obj3
          break
        case '4':
          const obj4 = {
            color: '#23BC39',
            name: '已发布',
            svgList: [
              // {label: '预览', value: 'see', key: 'seeClick'},
              { label: '下载', value: 'download', key: 'downloadClick' },
              { label: '查看流程', value: 'see', key: 'processClick' }
              // {label: '备注', value: 'edit'}
            ]
          }
          return obj4
          break
        case '5':
          const obj5 = {
            color: '#FF5657',
            name: '已退回',
            svgList: [
              // {label: '预览', value: 'see', key: 'seeClick'},
              { label: '提交', value: 'upload', key: 'uploadClick' },
              { label: '下载', value: 'download', key: 'downloadClick' },
              // {label: '备注', value: 'edit'},
              { label: '删除', value: 'delete', key: 'deleteClick' },
              { label: '查看流程', value: 'see', key: 'processClick' }
            ]
          }
          return obj5
          break
        default:
          break
      }
    },
    // 点击文件名预览
    yuLanClick(data) {
      // this.downloadClick(data)
    },
    // 操作
    buttonClick(index, data, key) {
      this[key](data)
    },
    // 预览
    seeClick(data) {},
    // 提交
    uploadClick(data) {
      this.$confirm('是否确认提交该素材?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.fileSubmit({ id: data.id }).then((response) => {
          if (response.data.status == 1) {
            this.$message.success('提交成功！')
            bus.$emit('refreshList')
          } else {
            this.$message.error(response.data.msg)
          }
        })
      })
    },
    // 撤回
    revokeClick(data) {
      this.$confirm('是否确认撤回该素材?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.fileRecall({ id: data.id }).then((response) => {
          if (response.data.status == 1) {
            this.$message.success('撤回成功！')
            bus.$emit('refreshList')
          } else {
            this.$message.error(response.data.msg)
          }
        })
      })
    },
    // 下载
    downloadClick(data) {
      this.$api.fileDownload({ id: data.id }).then((response) => {
        const blobUrl = window.URL.createObjectURL(response.data)
        const link = document.createElement('a')
        document.body.appendChild(link)
        link.style.display = 'none'
        link.href = blobUrl
        // 设置a标签的下载属性，设置文件名及格式，后缀名最好让后端在数据格式中返回
        link.download = data.name
        // 自触发click事件
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(blobUrl)
      })
    },
    // 删除
    deleteClick(data) {
      this.$confirm('是否确认删除该素材?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.fileDelete({ id: data.id }).then((response) => {
          if (response.data.status == 1) {
            this.$message.success('删除成功！')
            bus.$emit('refreshList')
          } else {
            this.$message.error(response.data.msg)
          }
        })
      })
    },
    // 审核进度
    processClick(data, index) {
      this.$api.getBpcDetails({materialId: data.id}).then((response) => {
        if (response.data.status == 1) {
          this.$refs.ProcessDialog.getData(response.data.data, true)
        } else {
          this.$message.error(response.data.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.fileList {
  .tips {
    text-align: right;
    color: #939393;
    min-height: 0.18rem;
  }
  >>>.svgIcon{
    font-size: 0.25rem  !important;
    margin: 0 0.1rem;
    color: #666;
    cursor: pointer;
  }
}
</style>
